<template>
  <div class="column-administer">
    <hm-header>
      <template #center>
        <div>栏目管理</div>
      </template>
    </hm-header>

    <!-- 我的栏目 -->
    <div class="my-column">
      <div class="header">
        <div class="title">我的栏目</div>
        <div class="desc">{{ myColumnDesc }}</div>
        <div class="edit-column" @click="toggleEdit">{{ isShowEdit }}</div>
      </div>
      <div class="my-column-item column-item">
        <van-tag
        round
        plain
        text-color="#333"
        size="large"
        v-for="(item, index) in categoryList"
        :key="item.id"
        :closeable="isEdit"
        @close="removeColumn(item, index)">
          {{ item.name }}
        </van-tag>
      </div>
    </div>

    <!-- 更多栏目 -->
    <div class="more-column">
      <div class="header">
        <div class="title">更多栏目</div>
        <div class="desc">点击添加栏目</div>
      </div>
      <div class="my-column-item column-item">
        <van-tag
        round
        plain
        text-color="#333"
        size="large"
        v-for="(item,index) in moreCategoryList"
        :key="item.id"
        @click="addColumn(item,index)">
          {{ item.name }}
        </van-tag>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      categoryList: [],
      moreCategoryList: [],
      isEdit: false
    }
  },

  created () {
    this.categoryList = JSON.parse(localStorage.getItem('categoryList'))
    this.moreCategoryList = JSON.parse(localStorage.getItem('moreCategoryList'))
    if (this.categoryList && this.moreCategoryList) {
      return
    }
    this.getCategoryList()
    this.getMoreCategoryList()
  },

  methods: {
    // 获取分类列表
    async getCategoryList () {
      const { data: res } = await this.$axios.get('/category')
      const { statusCode, data } = res
      if (statusCode !== 200) {
        return this.$toast.fail('获取分类列表失败')
      }
      this.categoryList = data.filter(v => v.is_top === 1)
    },

    // 获取更多分类列表
    async getMoreCategoryList () {
      const { data: res } = await this.$axios.get('/category')
      const { statusCode, data } = res
      if (statusCode !== 200) {
        return this.$toast.fail('获取分类列表失败')
      }
      this.moreCategoryList = data.filter(v => v.is_top !== 1)
    },

    // 点击编辑按钮事件
    toggleEdit () {
      this.isEdit = !this.isEdit
    },

    // 点击添加栏目
    addColumn (item, index) {
      this.moreCategoryList.splice(index, 1)
      this.categoryList.push(item)
    },

    // 点击删除栏目
    removeColumn (item, index) {
      if (item.id === 0 || item.id === 999) {
        return this.$toast(`${item.name}栏目不可以删除`)
      }
      this.categoryList.splice(index, 1)
      this.moreCategoryList.push(item)
    }
  },

  computed: {
    isShowEdit () {
      return this.isEdit ? '完成' : '编辑'
    },

    myColumnDesc () {
      return this.isEdit ? '点击x删除栏目' : ''
    }
  },

  watch: {
    categoryList (newVal) {
      localStorage.setItem('categoryList', JSON.stringify(this.categoryList))
    },
    moreCategoryList (newVal) {
      localStorage.setItem('moreCategoryList', JSON.stringify(this.moreCategoryList))
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  margin-bottom: 20px;
  height: 22px;
  line-height: 20px;
  .title {
    font-size: 13px;
    color: #333;
    margin-right: 10px;
  }
  .desc {
    flex: 1;
  }
  .edit-column {
    width: 46px;
    text-align: center;
    color: red;
    border-radius: 11px;
    border: 1px solid red;
  }
}

.column-item {
  display: flex;
  flex-wrap: wrap;
  width: 352px;
  .van-tag {
    font-size: 14px;
    padding: 0px;
    width: 66px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    display: block;
    margin-bottom: 15px;
    margin-right: 22px;
    .van-tag__close {
      vertical-align: middle;
      position: relative;
      top: -1px;
    }
  }
}

.my-column,
.more-column {
  padding: 15px 15px;
}
</style>
